<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import HelloWorldSetup from './components/HelloWorldSetup.vue';
import HelloWorldOption from './components/HelloWorldOption.vue';
import HelloWorldSetupMix from './components/HelloWorldSetupMix.vue';
import HelloWorldSetupHfn from './components/HelloWorldSetupHfn.vue';
import HelloWorldSetupSugarHfn from './components/HelloWorldSetupSugarHfn.vue';

import HelloWorldJsx from './components/HelloWorldJsx.jsx';
import HelloWorldJsxNoDfc from './components/HelloWorldJsxNoDfc.jsx';
import HelloWorldJsxOption from './components/HelloWorldJsxOption.jsx';

import HelloWorldFunctionHfn from './components/HelloWorldFunctionHfn.js';
import HelloWorldFunctionJsx from './components/HelloWorldFunction.jsx'

const type = ref('SFC')
const toggleType = (typeVal) => {
  type.value = typeVal
} 
const count = ref(0)

const increment = () => {
  count.value++
}
</script>

<template>
  <div class="action-bar">
    <button type="button" :class="{active: type == 'SFC'}" @click="toggleType('SFC')">SFC单文件组件写法</button>
    <button type="button" :class="{active: type == 'JSX'}" @click="toggleType('JSX')">JSX写法</button>
    <button type="button" :class="{active: type == 'Function'}" @click="toggleType('Function')">函数组件</button>
  </div>
  <div class="container" v-if="type == 'SFC'">
    <div class="component-item">
      <HelloWorld msg="SFC-Composition-setup语法糖（推荐）" />
    </div>
    <div class="component-item">
      <HelloWorldSetup msg="SFC-Composition-setup()" />
    </div>
    <div class="component-item">
      <HelloWorldOption msg="SFC-option" />
    </div>
    <div class="component-item">
      <HelloWorldSetupMix msg="SFC-mix" />
    </div>
    <div class="component-item">
      <HelloWorldSetupHfn msg="SFC-composition-setup()-h()" />
    </div>
    <div class="component-item">
      <HelloWorldSetupSugarHfn msg="SFC-composition-setup语法糖-h()" />
    </div>
  </div>
  <div class="container" v-else-if="type === 'JSX'">
    <div class="component-item">
      <HelloWorldJsx msg="SFC-composition-defineComponent-jsx(推荐)" />
    </div>
    <div class="component-item">
      <HelloWorldJsxNoDfc msg="SFC-composition-defineComponent简写-jsx" />
    </div>
    <div class="component-item">
      <HelloWorldJsxOption msg="SFC-jsx-option" />
    </div>
  </div>
  <div class="container" v-else-if="type === 'Function'">
    <div class="component-item">
      <HelloWorldFunctionHfn 
        msg="Function-component-h()" 
        :count="count" 
        @increment="increment"
      />
    </div>
    <div class="component-item">
      <HelloWorldFunctionJsx 
        msg="Function-component-jsx" 
        :count="count" 
        @increment="increment"
      />
    </div>
  </div>
</template>

<style scoped>
.ction-bar{
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.active{
  background-color: green;
  color: white;
}
.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.component-item{
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1)
}
</style>
